<template>
  <div class="vcommon">
    <V-Header
      @monitorVHeader="monitorVHeader"
      :navStat="navStat"
      @childByThemeColore="childByThemeColore"
    ></V-Header>
    <div class="zhan"></div>
    <div class="mainClass">
      <V-LeftNav :stat="navStat" :themeColor="themeColor"></V-LeftNav>
      <div></div>
      <slot class="mainSlot"></slot>
    </div>
  </div>
</template>

<script>
import VHeader from '@/components/common/vHeader/VHeader'
import VLeftNav from '@/components/common/vLeftNav/VLeftNav'
export default {
  name: 'index',
  components: {
    VHeader,
    VLeftNav
  },
  data () {
    return {
      navStat: false,
      // 默认主题颜色
      themeColor: '#20ADE5'
    }
  },
  methods: {
    monitorVHeader (stat) {
      // console.log(stat)
      this.navStat = stat
    },
    childByThemeColore (val) {
      this.themeColor = val
    }
  }
}
</script>

<style lang="scss" scoped>
.zhan {
  width: 100%;
  height: 60px;
}
.mainClass > div:nth-child(2) {
  width: 10px;
  height: calc(100vh - 60px);
}
.mainClass {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}
.mainSlot {
  width: calc(100%-10px);
}
</style>
